<template>
  <div class="recruitment-list">
    <div class="filter-controls">
      <el-input
          v-model="listQuery.keyword"
          placeholder="搜索姓名/职位"
          clearable
          style="width: 250px; margin-right: 15px;"
      />
      <el-select
          v-model="listQuery.experience"
          placeholder="工作经验"
          clearable
          style="width: 150px; margin-right: 15px;"
      >
        <el-option label="无经验" value="0" />
        <el-option label="1年以内" value="1" />
        <el-option label="1-3年" value="2" />
        <el-option label="3-5年" value="3" />
        <el-option label="5-10年" value="4" />
        <el-option label="10年以上" value="5" />
      </el-select>
      <el-select
          v-model="listQuery.education"
          placeholder="学历"
          clearable
          style="width: 150px; margin-right: 15px;"
      >
        <el-option label="大专以下" value="below_college" />
        <el-option label="大专" value="college" />
        <el-option label="本科" value="bachelor" />
        <el-option label="研究生" value="master" />
        <el-option label="博士" value="phd" />
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
    </div>

    <el-table :data="filteredList" style="width: 100%" height="600">
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="position" label="应聘职位" width="180" />
      <el-table-column prop="experience" label="工作经验" width="120">
        <template #default="scope">
          {{ formatExperience(scope.row.experience) }}
        </template>
      </el-table-column>
      <el-table-column prop="education" label="学历" width="120" />
      <el-table-column prop="applyDate" label="申请时间" width="180" />
      <el-table-column label="状态" width="120">
        <template #default="scope">
          <el-tag :type="statusTagType(scope.row.status)">
            {{ formatStatus(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template #default="scope">
          <template v-if="status === 'pending'">
            <el-button size="small" type="success" @click="emitAction('employ', scope.row)">录用</el-button>
            <el-button size="small" type="danger" @click="emitAction('reject', scope.row)">淘汰</el-button>
            <el-button v-if="scope.row.resume" size="small" icon="el-icon-download" @click="emitAction('download', scope.row)">简历</el-button>
          </template>

          <template v-if="status === 'employed'">
            <el-button size="small" type="primary" @click="emitAction('onboard', scope.row)">确认入职</el-button>
            <el-button size="small" @click="emitAction('view', scope.row)">查看</el-button>
          </template>

          <template v-if="status === 'onboarded'">
            <el-button size="small" @click="emitAction('view', scope.row)">查看详情</el-button>
          </template>

          <template v-if="status === 'rejected'">
            <el-button size="small" type="warning" @click="emitAction('reinterview', scope.row)">重新面试</el-button>
            <el-button size="small" @click="emitAction('view', scope.row)">查看</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'

export default {
  name: 'RecruitmentList',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    status: {
      type: String,
      default: 'pending'
    }
  },
  emits: ['action'],
  setup(props, { emit }) {
    const listQuery = ref({
      keyword: '',
      experience: '',
      education: ''
    })

    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(props.data.length)

    const filteredList = computed(() => {
      return props.data.filter(item => {
        const matchesKeyword = listQuery.value.keyword ?
            (item.name.includes(listQuery.value.keyword) || item.position.includes(listQuery.value.keyword)) : true

        const matchesExperience = listQuery.value.experience ?
            item.experience === listQuery.value.experience : true

        const matchesEducation = listQuery.value.education ?
            item.education === listQuery.value.education : true

        return matchesKeyword && matchesExperience && matchesEducation
      })
    })

    const formatExperience = (value) => {
      const map = {
        0: '无经验',
        1: '1年以内',
        2: '1-3年',
        3: '3-5年',
        4: '5-10年',
        5: '10年以上'
      }
      return map[value] || '未知'
    }

    const formatStatus = (status) => {
      const map = {
        pending: '待面试',
        employed: '已录用',
        onboarded: '已入职',
        rejected: '已淘汰'
      }
      return map[status] || status
    }

    const statusTagType = (status) => {
      const map = {
        pending: 'warning',
        employed: 'success',
        onboarded: '',
        rejected: 'danger'
      }
      return map[status] || 'info'
    }

    const emitAction = (action, candidate) => {
      emit('action', action, candidate)
    }

    const handleSearch = () => {
      currentPage.value = 1
    }

    const handlePageChange = (page) => {
      currentPage.value = page
    }

    // 当props.data变化时更新total
    watch(() => props.data, (newData) => {
      total.value = newData.length
    }, { immediate: true })

    return {
      listQuery,
      currentPage,
      pageSize,
      total,
      filteredList,
      formatExperience,
      formatStatus,
      statusTagType,
      emitAction,
      handleSearch,
      handlePageChange
    }
  }
}
</script>

<style scoped>
.recruitment-list {
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
}

.filter-controls {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>